<template>
  <div class="new-search" :class="tplItemData.fixedTop == 1 ? 'fixedTop': ''"
    :style="{ background: tplItemData.backgroundColor, paddingTop: 12 + tplItemData.levelPadding + 'px', paddingBottom: 12 + tplItemData.levelPadding + 'px' }">
    <!-- 顶部搜索框 -->
    <div class="search-container">
      <a href="javascript:;" class="ico-left" @click="JumpName('item-class-list')"
        :style="{ backgroundColor: tplItemData.search.iconBg}">
        <i :style="{ backgroundImage: 'url(' + tplItemData.search.left.pic + ')' }"></i>
        <span v-if="tplItemData.search.left.showtitle" :style="{color: tplItemData.search.left.color}">{{
          tplItemData.search.left.showtitle }}</span>
      </a>
      <div class="search-wrapper">
        <div class="icon" @click="searchList">
          <svg-icon icon-class="icon_search" class="icon_search" />
        </div>
        <input @keyup.enter="searchList" v-model="keyword" type="text"
          :placeholder="tplItemData.has_duodian ? '商品搜索：请输入商品、店铺名称' : tplItemData.placeholder ? tplItemData.placeholder :'商品搜索：请输入商品关键字'" />
      </div>
      <a href="javascript:;" class="ico-right" @click="JumpName('user-member')"
        :style="{ backgroundColor: tplItemData.search.iconBg }">
        <i :style="{ backgroundImage: 'url(' + tplItemData.search.right.pic + ')' }"></i>
        <span v-if="tplItemData.search.right.showtitle" :style="{ color: tplItemData.search.right.color }">{{
          tplItemData.search.right.showtitle }}</span>
      </a>
    </div>
  </div>
</template>

<script>

export default {
  name: 'index',
  data() {
    return {
      keyword: ''
    }
  },
  props: {
    tplItemData: {
      type: Object // 传入参数的类型
    }
  },
  methods: {
    searchList() {
      this.$JumpHref(this, '/mb/item/item-list', { title: this.keyword })
    },
    JumpName(url, data) {
      this.$JumpName(this, url, data)
    }
  }
}
</script>

<style lang='scss'>
@import "src/styles/mixin";
.new-search {
  width: 100%;
  padding: 24px 0;
  text-align: center;
  &.fixedTop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 999;
  }

  .search-container {
    display: flex;

    >a {
      display: inline-block;
      width: 64px;
      height: 64px;
      border-radius: 50%;
      text-align: center;
      margin: 0 10px;

      &.ico-left {
        margin-right: 4px;
        margin-left: 24px;
      }

      &.ico-right {
        margin-left: 4px;
        margin-right: 24px;
      }

      i {
        display: block;
        width: 100%;
        height: 100%;
        background-repeat: no-repeat;
        background-position: center;
        background-size: 50%;
      }
      span {
        margin-top: 5px
      }
    }

    .search-wrapper {
      position: relative;
      flex: 1;
      height: 64px;
      border-radius: 30px;
      background: #fff;
      margin: 0 20px;

      .icon {
        position: absolute;
        left: 20px;
        top: 50%;
        transform: translateY(-50%);
        color: #999999;
        font-size: 24px;
        margin-right: 10px;

        .icon_search {
          width: 32px;
          height: 32px;
        }
      }

      @include placeColor(#999);

      input {
        display: inline-block;
        width: 100%;
        height: 64px;
        padding: 15px 70px;
        border: 0;
        background: transparent;
        box-sizing: border-box;
      }
    }
  }
}
</style>
